<!DOCTYPE html>
<head>
<title>Limited Fixed Area Demo Page</title>
<!-- stylesheet -->
<link rel="stylesheet" href="css/base.css">
<style type="text/css">
#overall {
	float: left;
	width: 420px;
	margin: 20px 0;
	position: relative;
}
#article {
	float: left;
	width: 400px;
	height: 2000px;
	background: #efefef;
	padding: 5px 10px;
}
#comment {
	float: left;
	width: 400px;
	height: 2000px;
	background: #afafaf;
	padding: 5px 10px;
}
#box {
	float: left;
	width: 200px;
	height: 200px;
	padding: 10px;
	background: #bfbfbf;
	position: absolute;
	top: 0;
	right: -230px;
}
#box p {
	margin: 0;
	padding: 0;
}
</style>

<!-- jQuery -->
<script src="/static/shop/js/jquerylib.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">	
$(document).ready(function() {
	var starting_position = $('#box').offset();  	// Get the margin-top value of #box toward the top of the document
	var top_padding = 10;				// The padding you set when the window is scrolled
	var bottom_limit = $('#comment').offset();		// Get the margin-top value of #comment toward the top of the document
	var box_height = $('#box').height() + 20;		// Get the height of the #box. The + 20 represents the padding of #box
	
	$(window).scroll(function(){// If the window is scrolled...
		var top_window = $(window).scrollTop();		// Get the margin-top of current scrolled window toward the top of the document
		if (top_window > starting_position.top && top_window < bottom_limit.top - box_height){			// Check if the current window position is below the #article AND above the #content.
			$('#box').stop().animate({top: top_window - starting_position.top + top_padding}, 400);
		} else if (top_window > bottom_limit.top - starting_position.top - box_height){				// If the current window position is below the #comment, stop it on the top of #comment.
			$('#box').stop().animate({top: bottom_limit.top - starting_position.top - box_height }, 400);
		} else {// If it isn't below the #content or in between #article and #comment, it means that the window is scrolled to the top. Set the value to zero to place the #box on its original position.
			$('#box').stop().animate({top: 0 }, 400);		    
		}
	});
});
</script>
</head>
<body>
<header id="outstando" class="ewrap">
	<div class="wrapper">
    	<a href="http://oustando.com" id="site-name">Outstando</a> &#8594; <a href="http://outstando.com/limited-fixed-area-using-jquery/" class="view-article">Read the article</a>
    </div>
</header>
<section id="content" class="ewrap">
    <div class="wrapper">
        <h1>Limited Fixed Area using jQuery</h1>
        <div id="overall">
            <div id="article">
                <p>Let's say that this is article area. The dimension of this area is 400 X 2000 pixels.</p>
            </div>
            <!-- #article -->
            <div id="comment">
                <p>This is comment area. Keep the box fixed to the window but as soon as the window is scrolled to this area, stop the box.</p>
            </div>
            <!-- #comment -->
            <div id="box">
                <p>This is the box. It should has fixed position toward the window and content area. However, it should stop scroll down when this box reaches the bottom of content area. Rather than using <code>position: fixed</code>, this box is positioned using <a href="http://outstando.com/kombinasi-relative-absolute-positioning/" title="relative absolute positioning combo"><code>position: relative</code> and <code>absolute</code> combo</a>.</p>
            </div>
            <!-- #box --> 
        </div>
        <!-- #overall --> 
    </div>
</section>
</body>
</html>